<template>
	<el-container>
			<el-main class="nopadding">
				<el-container>
					<el-header >
						<div class="left-panel">
							时间：<el-date-picker v-model="date" type="datetimerange" value-format="YYYY-MM-DD HH-mm-ss" :shortcuts="shortcuts" :disabledDate="disabledDate" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable='false' :editable="false" @change="dateChange" @input="dateChange"></el-date-picker>
							<div style="padding-left:10px"></div>
							<el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'message.add'"></el-button>
							<!-- <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del" v-auth="'message.delete'"></el-button> -->
						</div>
						<div class="tags">
						<!-- <div class="left-panel"> </div> -->
							
						</div>
						<div class="right-panel-search">
							<el-input v-model="search.keyword" placeholder="标题 / 内容" clearable></el-input>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</div>
					</el-header>
					<el-main class="nopadding">
						<scTable ref="table" :apiObj="apiObj" :params="search"  highlightCurrentRow remoteFilter @rowClick="rowClick">
							 <el-table-column type="selection" width="50"></el-table-column>
							<el-table-column label="ID" prop="id" width="60"></el-table-column>
							<el-table-column label="类型" prop="type" width="60">
								<template #default="scope">
									<el-icon v-if="scope.row.type=='user'" ><el-icon-user /></el-icon>
									<el-icon v-if="scope.row.type=='sys'" style="color: #B85151;"><el-icon-odometer /></el-icon>
								</template>
							</el-table-column>
							<el-table-column label="发送人" prop="sendName" width="140"></el-table-column>
							<el-table-column label="接收人" prop="recName" width="140"></el-table-column>
							<el-table-column label="标题" prop="title" width="200"></el-table-column>
							<el-table-column label="内容" prop="content" width="300"></el-table-column>
							<el-table-column label="链接" prop="link" width="100"></el-table-column>
							<el-table-column label="发送时间" prop="time" width="200"></el-table-column>
							<el-table-column label="已读" prop="if_read" width="100">
								<template #default="scope">
									<el-span v-if="scope.row.if_read=='1'" >已读</el-span>
									<el-span v-if="scope.row.if_read=='0'" style="color: #B85151;">未读</el-span>
								</template>
							</el-table-column>
							<!-- <el-table-column label="操作" fixed="right" align="right" width="160">
								<template #default="scope">
									<el-button-group>
										<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
										<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">处置</el-button>
										<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
											<template #reference>
												<el-button text type="primary" size="small">删除</el-button>
											</template>
										</el-popconfirm>
									</el-button-group>
								</template>
							</el-table-column> -->
						</scTable>
					</el-main>
				</el-container>
			</el-main>
	</el-container>

	<el-drawer v-model="infoDrawer" title="消息详情" :size="600" @close="closeDrawer" destroy-on-close>
		<info ref="info" ></info>
	</el-drawer>
</template>

<script>
	import info from './info'
	import tool from '@/utils/tool'

	export default {
		name: 'message',
		components: {info},
		data() {
			return {
				infoDrawer: false,
				shortcuts: tool.getDateShortcuts(),
				date: [],
				apiObj: this.$API.system.message.msgList,
				search: {
					keyword: "",
					userId: this.$TOOL.data.get("USER_INFO").userId,
					startTime:'',
					endTime:'',
					status:'',
					filterData: {},
				},
				selection:[],
			}
		},
		created(){
			this.initdate()
		},
		mounted(){
		},
		methods: {
			upsearch(){
				this.$refs.table.refresh(this.search)
			},
			rowClick(row){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.setData(row)
				})
			},
			closeDrawer(){
				this.infoDrawer = false
				// 更新列表
				this.upsearch()
			},
			async initdate(){
				let oneDay = 1000 * 60 * 60 * 24;
			    let dateNextZero = new Date(new Date().getTime());
				dateNextZero.setHours(23);
				dateNextZero.setMinutes(59);
				dateNextZero.setSeconds(59);
				dateNextZero = tool.dateFormat(dateNextZero)
			    let date6Before = new Date(new Date().getTime() - (oneDay * 6));
				date6Before.setHours(0);
				date6Before.setMinutes(0);
				date6Before.setSeconds(0);
				date6Before = tool.dateFormat(date6Before)
				this.date = [date6Before, dateNextZero];
				this.search.startTime = date6Before
				this.search.endTime = dateNextZero
			},
			dateChange(val){
				this.search.startTime = this.date[0]
				this.search.endTime = this.date[1]
				this.upsearch()
			},
			disabledDate(time){
				return time.getTime() > new Date().getTime() + 8.64e7;
			},
			filterChange(selected){
				this.search.filterData = selected
			},
			async add(){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.open('add')
				})
			},
			//编辑
			table_edit(row){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.open('edit').setData(row)
				})
			},
			//查看
			table_show(row){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.open('show').setData(row)
				})
			},
			//删除
			async table_del(row, index){
				var reqData = {userIds: [row.id], userName:row.userName}
				var res = await this.$API.system.alert.delete.delete(reqData);
				if(res.code == 200){
					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
					this.$refs.table.tableData.splice(index, 1);
					this.$message.success("删除成功")
					
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
		}
	}
</script>

<style>
</style>
